<%@taglib prefix="s" uri="/struts-tags"%>

<script type="text/javascript" charset="utf-8"
	src="js/jquery.listnav.min-2.1.js"></script>
<script type="text/javascript" charset="utf-8"
	src="js/jquery.dataTables.listnav.js"></script>


<script type="text/javascript" charset="utf-8">
	$(document)	.ready(	function() {
	var directorateId = getURLParameter("directorateId");
	var oTable = $('#departmentTable').dataTable({
		"sDom" : 'Zfrtp',
		"sPaginationType" : "bootstrap",
		"iDisplayLength" : 10,
		"bServerSide" : true,
		"bPaginate" : true,
		"sAjaxSource" : "departmentTableAjax.action",
		"aoSearchCols" : [ null, null,
				null, null, {
					"sSearch" : "Yes"
				} ],
		"aoColumnDefs" : [ {
			"fnRender" : function(o, val) {
				if (o.aData[4] == "Yes") {
					return '<a href=editDepartment.action?departmentId='
							+ o.aData[5]
							+ '&directorateId='
							+ directorateId
							+ '>'
							+ o.aData[0]
							+ '</a>';
				} else {
					return '<a href="#" onClick=toActive('
							+ o.aData[5]
							+ ')>'
							+ o.aData[0]
							+ '</a>';
				}
			},
			"aTargets" : [0]
		} ],
		"fnServerParams" : function(aoData) {
			var directorateId = getURLParameter("directorateId");
			aoData.push({
				"name" : "directorateId",
				"value" : directorateId
			});
		}
	});
	
	$('#check-active').click(function() {
		var other = $('#check-active:checked').val();
		if (other != undefined) {
			oTable.fnFilter("", 4, true, false);
		} else {
			oTable.fnFilter("Yes", 4, true, false);
		}
	});
});
	function toActive(id) {
		var r = confirm('Do you want to make this Department active?');
		if (r == true) {
			window.location
					.replace("changeActiveDepartment?idDepartment=" + id);
		}
	}

	function getURLParameter(name) {
		return decodeURI((RegExp(name + '=' + '(.+?)(&|$)').exec(
				location.search) || [ , null ])[1]);
	}
</script>

<style type="text/css">
.dataTables_filter {
	display: none;
}

.dataTables_length {
	display: none;
}

.dataTables_paginate {
	display: inline;
}
</style>

<div id="inactive-div">
	<a
		href='createDepartment.action?directorateId=<s:property value="directorateId"/>'
		class="btn btn-success">Create</a> <label class="checkbox"> <input
		type="checkbox" name="check-inactive" id="check-active">
		Include In-active
	</label>
</div>

<table class='table table-striped dataTable table-bordered display'
	id="departmentTable">
	<thead>
		<tr>
			<!-- <th class="hideTable">Hide</th> -->
			<th>Department Name</th>
			<th>Address 1</th>
			<th>Postcode</th>
			<th>Contact</th>
			<th>Active</th>
		</tr>
	</thead>
	<tbody>

	</tbody>
</table>
